<template>
    <div class="classroom-advice">
      <h3>班级建议</h3>
      <ul>
        <li v-for="(advice, index) in advices" :key="index">
          {{ advice }}
        </li>
      </ul>
    </div>
  </template>
  
  <script>
import http from '../../http/index.js' 

export default {
  name: 'ClassroomAdvice',
  props: {
    classroomId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      advices: [] 
    };
  },
  methods: {
    fetchAdvices() {
      //从后端通过班级ID获取班级建议
      http({
        method: 'get',
        url: '/api/classroom/advice',
        params: {
          classroomId: this.classroomId
        }
      }).then(res => {
        if (res) {
          this.advices = [ 
            `1、 ${res.badCourse}课程学生均分低————需调整难度。`,
            `2、${res.goodCourse}课程学生均分较高————建议保持。`,
            `3、学生 ${res.badStudent}活跃度低、学习时长较少————建议关注。`,
            `4、学生 ${res.goodStudent}活跃度高、学习时长多————建议表扬。`,
            `5、班级均分略 ${res.isHigh ? '高于' : '低于'}总体均分。`
          ];
        }
      }).catch(error => {
        console.error(error);
      });
    }
  },
  mounted() {
    this.fetchAdvices(); 
  }
};
</script>
  
  <style scoped>
  .classroom-advice h3 {
    background-color: #409eff;
    color: white;
    padding: 10px 20px;
    margin: 0;
    font-family: "Segoe UI", "Roboto", "Oxygen",
      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
      sans-serif; 
    text-shadow: 0px 2px 4px rgba(0,0,0,0.2); 
    border-bottom: 3px solid #307AFF; 
  }
  
  .classroom-advice ul {
    padding-left: 20px;
    padding-right: 20px; 
    text-align: start; 
  }
  
  .classroom-advice li {
    text-align: left;
    line-height: 1.8; 
    font-size: 16px; 
    color: #333;
    font-family: "Georgia", "Times New Roman", Times, serif; 
    margin-bottom: 5px; 
  }
  
  .classroom-advice li:before {
    content: "•"; 
    color: #409eff; 
    font-weight: bold; 
    display: inline-block; 
    width: 1em; 
    margin-left: -1em; 
  }
  </style>
